<script setup>
  import { useI18n } from 'vue-i18n'
  const { t } = useI18n()

  const goToLogin = () => {
    location.href = "/control/login"
  }
</script>

<template>
  <div class="footer_box">
    <div class="bg_box">
      <img src="@/assets/images/footer_bg.png" alt="">
      <div class="content_box">
        <div class="left">
          <div class="title wow animate__animated animate__fadeInUp">{{ t('common.footer.title') }}</div>
          <div class="wow animate__animated animate__fadeInUp">{{ t('common.footer.des') }}</div>
        </div>
        <el-button class="wow animate__animated animate__rubberBand" type="primary" @click="goToLogin">{{ t('common.footer.but') }}</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.footer_box {
  width: 100%;
  margin-top: 35px;
  .bg_box {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
    }
    .content_box {
      position: absolute;
      width: 1200px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        color: #6F0B6F;
        div {
          font-size: 14px;
          font-weight: 400;
        }
        .title {
          font-size: 18px;
          font-weight: 500;
          margin-bottom: 10px;
        }
      }
      button {
        font-size: 14px;
      }
    }
  }
}
</style>
